<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TabView Example - Nested TabViews</title>

<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/button/assets/button.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">

<script src="http://www.json.org/json.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/datatable/datatable-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/autocomplete/autocomplete-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/button/button-beta-min.js"></script>
<script src="../../build/extras/jc21/validate-min.js"></script>
<script src="../../build/dataform/dataform-debug-beta.js"></script>
<script src="../../build/bubbling/plugins/dispatcher.js"></script>

<style type="text/css">
#demo {
    width:50em; /* arbitrary width */
}

#demo .yui-content {
    padding:1em;
}

#demo .loading {
    background-image:url(img/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

#demo .loading * {
    display:none;
}

</style>

<script type="text/javascript">

YAHOO.example.init = function() {
    var tabView = new YAHOO.widget.TabView({id: 'demo'});

    YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
        label: 'Inline Scripts',
        dataSrc: 'tabs/xhtml.with.inline.scripts.html',
        active: true
    }), tabView);

    YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
    	label: 'Remote Scripts',
        dataSrc: 'tabs/xhtml.with.remote.scripts.html',
        cacheData: true
    }), tabView);

    YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
    	label: 'Nested TabView',
        dataSrc: 'tabs/xhtml.with.tabview.html',
        cacheData: true
    }), tabView);

    YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
    	label: 'TabView with DataForm',
        dataSrc: 'tabs/xhtml.with.dataform.html',
        cacheData: true
    }), tabView);


    YAHOO.util.Event.onContentReady('doc', function() {
        tabView.appendTo('doc');
    });

};

YAHOO.example.init();
</script>

</head>
<body>
<div id="doc">
    <h1>TabView and Dispatcher Example - Dynamically loading content with script inside</h1>
    <p>This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to managing the content inside the tab. This feature will warranty the execution of the scripts (remote and inline "script" tags) during the dataSrc request.</p>
</div>

</body>
</html>
